{extend name="public/base" /}

{block name="content"}
<style>
    .pagination{
        margin-top: 0;
        margin-bottom: 0;
    }
</style>
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="pull-left">
                        <a class="btn btn-sm btn-primary modal-create">添加</a>
                    </div>
                    <table class="table table-bordered table-hover">
                      <thead>
                        <tr>
                            <th>菜单名</th>
                            <th>菜单key</th>
                            <th>权重</th>
                            <th>状态</th>
                            <th>添加时间</th>
                            <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        {empty name='list'}
                        <tr align="center">
                            <td colspan="6">
                                暂时没有数据哦
                            </td>
                        </tr>
                        {else /}
                        {foreach $list as $k=>$item}
                        <tr>
                          <td>
                            <a {if !$p_id}href="/admin/sysmenu?id={$item.id}"{else/} style="color:#333;cursor: default;" {/if}><span class="fa {$item.icon}"></span> {$item.name}</a>
                          </td>
                          <td>{$item.permission_key}</td>
                          <td>{$item.weight}</td>
                          <td><span style="cursor: pointer;" data-id="{$item.id}" data-status="{$item.status}" class="menu-status label {$item.status==0 ? 'label-danger' : 'label-primary'} ">{$item.status == 0 ? '隐藏' : '显示'}</span></td>
                          <td>{$item.create_time}</td>
                          <td>
                              <a href="/admin/sysmenu/{$item.id}" title="编辑" class="btn btn-outline btn-xs btn-info modal-item"><i class="fa fa-edit"></i></a>
                          </td>
                        </tr>
                        {/foreach}
                        {/empty}
                      </tbody>
                    </table>
                    {$list|raw}
                </div>
            </div>
        </div>
    </div>
</div>
<div id="modal-form" class="modal fade" aria-hidden="true">
    <div class="modal-dialog" style="width:400px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">新增菜单</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal add-menu-form" role="form">
                    <input type="hidden" name="parent_id" value="">
                  <div class="form-group">
                    <label for="name" class="col-sm-4 control-label">菜单名字 <font color="red">*</font></label>
                    <div class="col-sm-8">
                      <input type="text" autocomplete="off" class="menu-common form-control" id="name" name="name" placeholder="请输入菜单名字">
                      <span></span>
                    </div>
                  </div>
                  {if $p_id==0}
                  <div class="form-group">
                    <label for="icon" class="col-sm-4 control-label">图标 <font color="red">*</font></label>
                    <div class="col-sm-8">
                      <input type="text" autocomplete="off" class="menu-common form-control" id="icon" name="icon" placeholder="fa-user">
                    </div>
                  </div>
                  {/if}
                  <div class="form-group">
                    <label for="permission_key" class="col-sm-4 control-label">菜单key <font color="red">*</font></label>
                    <div class="col-sm-8">
                      <input type="text" autocomplete="off" class="menu-common form-control" id="permission_key" name="permission_key" placeholder="唯一标识">
                      <span></span>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="url" class="col-sm-4 control-label">url地址 <font color="red">*</font></label>
                    <div class="col-sm-8">
                      <input type="text" autocomplete="off" class="menu-common form-control" id="url" name="url" placeholder="url地址">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="weight" class="col-sm-4 control-label">权重</label>
                    <div class="col-sm-8">
                      <input type="text" autocomplete="off" class="form-control" id="weight" name="weight" placeholder="整数">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="desc" class="control-label col-sm-4">描述</label>
                    <div class="col-sm-8">
                        <textarea name="desc" autocomplete="off" class="form-control" rows="3"></textarea>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="pull-right" style="margin-right:8px;">
                      <button type="button" class="btn btn-primary add-menu">保存</button>
                    </div>
                  </div>
                  <div class="alert alert-danger hide error-info"></div>
                </form>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script>
$(function(){
    var p_id = <?php echo $p_id; ?>;
    $('.modal-item').click(function(){
        var url = $(this).attr('href');
        if ($(this).hasClass('modal-create')) {
            var title = '新增菜单';
        }else{
            var title = '编辑菜单';
        }
        $.get(url,{},function(res){
            showModal('modal-form',res.data,title);
        },'json');
        return false;
    });
    $('.modal-create').click(function(){
        $('#modal-form').modal('show').find('.modal-title').text('新增菜单');
        $('.add-menu').attr('data-id',0);
        $('input[name="parent_id"]').val(p_id);
    });
});
</script>
<script>
$(function(){
    // ws = new WebSocket("ws://192.168.56.2:2346");
    // ws.onopen = function(){
    //     console.log('连接成功');
    //     ws.send('下单成功');
    //     console.log('给服务器发送字符串');
    // };
    // ws.onmessage = function(e) {
    //     console.log("收到服务端的消息：" + e.data);
    // };
    $('.menu-status').click(function(){
        var _this = $(this);
        var status = _this.data('status');
        var id = _this.data('id');
        var text = status == 0 ? '确认显示吗？' : '确认隐藏吗';
        layer.confirm(text,{
            btn:['确认','取消']
        },function(){
            $.get('/admin/status/'+id+'/'+status,function(res){
                if (res.code==1) {
                    alertMsg(res.msg);
                }else{
                    alertMsg(res.msg,'error',false);
                }
            },'json');
            layer.closeAll('dialog');
        });
    });

    hide_model(['weight','desc','passwd','password_confirm']);

    $('.menu-common').blur(function(){
        if ($(this).val() == '') {
            $(this).parent().parent().addClass('has-error');
        }else{
            $(this).parent().parent().removeClass('has-error');
        }
    });
    $('.add-menu').click(function(){
        var id = $(this).attr('data-id');
        var params = $('.menu-common').length;
        for (var i = 0; i < params; i++) {
            if ($('.menu-common').eq(i).val()=='') {
                $('.menu-common').eq(i).parent().parent().addClass('has-error');
                $('.menu-common').eq(i).focus();
                var flag = false;
                break;
            }else{
                $('.menu-common').eq(i).parent().parent().removeClass('has-error');
                var flag = true;
            }
        }
        if (parseInt(id) !== 0) {
            // 修改
            var jsonObj = {data:$('.add-menu-form').serialize(),id:id};
        }else{
            // 新增
            var jsonObj = {data:$('.add-menu-form').serialize()};
        }
        if (flag) {
            $.post('/admin/sysmenu',jsonObj,function(res){
                console.log(res);
                if (res.code==1) {
                    $('#modal-form').modal('hide');
                    alertMsg(res.msg);
                }else{
                    $('.error-info').removeClass('hide').text(res.msg);
                }
            },'json');
        }
    });
});
</script>
{/block}